<template>
  <el-container class="bg_img1">
    <el-main class="bg_size1">
      <h1 class="ZC">修改登录密码</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-position="left"
        label-width="120px"
      >
        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="id" prop="id" class="item">
              <el-input v-model="ruleForm.id" type="id" disabled>{{ id }}</el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="初始密码" prop="password" class="item">
              <el-input
                v-model="ruleForm.password"
                placeholder="请输入初始密码"
                type="password"
                show-password
                clearable
              />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="6" :offset="2" class="msg">
            <span>{{ msg1 }}</span>
          </el-col> -->
        </el-row>

        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="新密码" prop="newpassword" class="item">
              <el-input
                v-model="ruleForm.newpassword"
                placeholder="请输入新密码"
                type="password"
                show-password
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8" :offset="8">
            <el-form-item label="确认密码" prop="commitpassword" class="item">
              <el-input
                v-model="ruleForm.commitpassword"
                placeholder="请确认密码"
                type="password"
                show-password
                clearable
                @blur="check()"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6" :offset="9" class="msg">
            <span>{{ msg }}</span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="2" :offset="8">
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                plain
                v-on:click="confirm()"
                >确认修改</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios'
import qs from 'querystring'

export default {
  name: "Edit",
  data() {
    return {
      ruleForm: {
        id: this.$store.state.accountInfo.id,
        password: "",
        newpassword: "",
        commitpassword: "",
      },
      rules: {
        newpassword: {
          required: true,
          min: 6,
          max: 10,
          message: "长度在 6 到 10 个字符",
          trigger: "blur",
        },
        commitpassword: {
          required: true,
          message: "确认密码不能为空",
          trigger: "blur",
        },
      },
      // msg1:"",
      msg: ""
    }
  },
  methods: {
    // checkOld(){
    //   let password = this.ruleForm.password;
    //   if(password != this.$store.state.password){
    //       this.msg1 = "原始密码输入错误,请重新输入";
    //       password=""
    //   }
    // },
    check() {
      let newpassword = this.ruleForm.newpassword;
      let commitpassword = this.ruleForm.commitpassword;
      if (newpassword != commitpassword && commitpassword != "") {
        this.msg = "密码输入不同，请重新输入";
      }
    },
    confirm() {
      let that = this;
      let params={
        id: this.ruleForm.id,
        password: this.ruleForm.newpassword
      }
      
      this.$refs["ruleForm"].validate((valid) => {
        axios
          .post(
            "http://localhost:8080/library/updatePassword",
            qs.stringify(params),
            {
              headers: {
                "Content-Type":
                  "application/x-www-form-urlencoded;charset=UTF-8",
              },
            }
          )
          .then(function (response) {
            if (response.data.code == 1) {
              window.alert("密码修改成功");
              let modelInfo = response.data.data;
              console.log(JSON.stringify(modelInfo));
              that.$router.push({
                path: "/"
              })
            } else {
              window.alert("密码修改失败");
              this.$router.push({ path: "/components/EditPassWordVue" })
            }
          })
          .catch((error) => {
            console.log(error);
          })
      })
    }
  }
}
</script>

<style scoped>
.ZC {
  font-size: 30px;
  margin-left: 40%;
  color: rgb(150, 172, 192);
}
.msg {
  color: red;
  margin-bottom: 15px;
}
</style>
